define([ 'jquery', 'frameworks/transformjs.1.0.beta.2' ], function($, transformjs) {
	"use strict";
	var renderer = function(completed) {

		var self = this;
		
		var tableZIndex = 500;

		var onComplete = function() {

		};
		var eventQueue = [];

		var resizeGameArea = function() {
			var otherStuffHeight = $("#header").outerHeight(true);
			var tableHeight = $("#table").outerHeight(true);
			var windowHeight = $(window).height();
			var gameAreaHeight = (windowHeight - otherStuffHeight);
			var gameAreaMinimumHeight = 520;

			gameAreaHeight = (gameAreaHeight > gameAreaMinimumHeight) ? gameAreaHeight : gameAreaMinimumHeight;

			var handHeight = (gameAreaHeight - tableHeight) / 2;
			var opponentHand = $(".opponent.hand");
			var maximumHandHeight = 200;

			handHeight = maximumHandHeight - handHeight;
			opponentHand.css({
				"margin-top" : "-" + handHeight + "px"
			});

			var gameArea = $(".game-area");
			gameArea.height(gameAreaHeight);
		};

		// prepare game area
		$(resizeGameArea);

		$(window).resize(resizeGameArea);

		self.render = function(callback) {
			onComplete = callback || function() {
			};
			renderQueue();
		};

		var renderQueue = function() {
			if (eventQueue.length) {
				(eventQueue.shift())();
			} else {
				resetTableZIndex();	
				onComplete();
			}
		};
		

		self.turnWon = function(cardSelectors) {
			eventQueue.push(function() {
				var delay = 1500;
				var fadeOut = 300;
				
				$("#turnWonText").css({
					'height' : '0px',
					'display' : 'table'
				}).delay(delay).fadeOut(fadeOut, renderQueue);
				
				$.each(cardSelectors, function(index, cardSelector) {
					$(cardSelector).delay(delay).fadeOut(fadeOut);
				});
				
			});
			
		};

		self.turnLost = function(cardSelectors) {
			eventQueue.push(function() {		
				var delay = 1500;
				var fadeOut = 300;
				
				$("#turnLostText").css({
					'height' : '0px',
					'display' : 'table'
				}).delay(delay).fadeOut(fadeOut, renderQueue);
				
				$.each(cardSelectors, function(index, cardSelector) {
					$(cardSelector).delay(delay).fadeOut(fadeOut);
				});
			});
			
		};

		self.callPlayer = function(card) {
			eventQueue.push(function() {
				tableZIndex += 1;
				$(card.cardClassSelector()).css({
					position : 'absolute',
					left : '430px',
					bottom : '-180px',
					'z-index' : '' + tableZIndex
				}).fadeIn().delay(500).animate({
					translateY : '-=265',
					rotateZ : '-=' + (Math.PI * Math.random())
				}, 600, renderQueue);
			});
		};

		self.callOpponent = function(card) {
			eventQueue.push(function() {
				tableZIndex += 1;
				$(card.cardClassSelector()).css({
					position : 'absolute',
					left : '430px',
					top : '-180px',
					'z-index' : '' + tableZIndex
				}).fadeIn().delay(500).animate({
					translateY : '+=265',
					rotateZ : '-=' + (Math.PI * Math.random())
				}, 600, renderQueue);
			});
		};

		self.refreshTable = function(table) {
			$(table).each(function(index, card) {
				tableZIndex += 1;
				$(card.cardClassSelector()).css({
					position : 'absolute',
					left : '430px',
					top : '85px'
				}).animate({
					rotateZ : '-=' + (Math.PI * Math.random())
				}, 10);
			});
		};
		
		var resetTableZIndex = function() {
			tableZIndex = 500;
		};	

	};
	return renderer;
});